import initLoginBg from "./init.ts";
import {useEffect} from "react";
import LoginForm from "@/components/LoginForm";
import styles from "@/pages/Login/login.module.scss";

export default () => {
    // 加载完这个组件之后，加载背景
    useEffect(()=>{
        initLoginBg();
        window.onresize = function(){initLoginBg()};
    },[]);

    return (
        <div className={styles.loginPage}>
            {/* 存放背景 */}
            <canvas id="canvas" style={{display:"block"}}></canvas>
            {/* 登录盒子 */}
            <div className={styles.loginBox+ " loginbox"}>
                {/* 标题部分 */}
                <div className={styles.title}>
                    <h1>前端乐哥&nbsp;·&nbsp;通用后台系统</h1>
                    <p>Strive Everyday</p>
                </div>
                {/* 表单部分 */}
                <div className="form">
                    <LoginForm />
                </div>
            </div>
        </div>
    )
};